<template>
  <div class="dynamic-permission-form">
    <!-- 字段匹配 -->
    <div v-if="conditionType === 'field_match'" class="form-section">
      <ElFormItem label="用户字段" prop="config.user_field" :rules="[{ required: true, message: '请输入用户字段', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.user_field" 
          placeholder="例如: user_id, dept_id" 
          @input="updateConfig"
        />
        <div class="field-hint">用户对象中的字段名，用于获取匹配值</div>
      </ElFormItem>
      
      <ElFormItem label="目标字段" prop="config.target_field" :rules="[{ required: true, message: '请输入目标字段', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.target_field" 
          placeholder="例如: created_by, owner_id" 
          @input="updateConfig"
        />
        <div class="field-hint">数据表中需要匹配的字段名</div>
      </ElFormItem>
    </div>

    <!-- 字段包含列表 -->
    <div v-else-if="conditionType === 'field_in_list'" class="form-section">
      <ElFormItem label="用户列表字段" prop="config.user_list_field" :rules="[{ required: true, message: '请输入用户列表字段', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.user_list_field" 
          placeholder="例如: accessible_project_ids" 
          @input="updateConfig"
        />
        <div class="field-hint">用户对象中包含ID列表的字段名</div>
      </ElFormItem>
      
      <ElFormItem label="目标字段" prop="config.target_field" :rules="[{ required: true, message: '请输入目标字段', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.target_field" 
          placeholder="例如: project_id, category_id" 
          @input="updateConfig"
        />
        <div class="field-hint">数据表中需要匹配的字段名</div>
      </ElFormItem>
    </div>

    <!-- 部门树权限 -->
    <div v-else-if="conditionType === 'dept_tree'" class="form-section">
      <ElFormItem label="目标部门路径字段" prop="config.target_dept_path_field" :rules="[{ required: true, message: '请输入部门路径字段', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.target_dept_path_field" 
          placeholder="例如: dept_path" 
          @input="updateConfig"
        />
        <div class="field-hint">数据表中存储部门路径的字段名（如: /1/2/3）</div>
      </ElFormItem>
      
      <ElAlert 
        title="说明" 
        type="info" 
        :closable="false"
        description="系统会自动从用户信息中获取 dept_path，匹配当前部门及其所有子部门的数据"
      />
    </div>

    <!-- 部门列表权限 -->
    <div v-else-if="conditionType === 'dept_list'" class="form-section">
      <ElFormItem label="用户部门列表字段" prop="config.user_dept_list_field" :rules="[{ required: true, message: '请输入用户部门列表字段', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.user_dept_list_field" 
          placeholder="例如: accessible_dept_ids" 
          @input="updateConfig"
        />
        <div class="field-hint">用户对象中包含部门ID列表的字段名</div>
      </ElFormItem>
      
      <ElFormItem label="目标部门ID字段" prop="config.target_dept_id_field" :rules="[{ required: true, message: '请输入目标部门ID字段', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.target_dept_id_field" 
          placeholder="例如: dept_id" 
          @input="updateConfig"
        />
        <div class="field-hint">数据表中存储部门ID的字段名</div>
      </ElFormItem>
    </div>

    <!-- 自定义SQL -->
    <div v-else-if="conditionType === 'custom_sql'" class="form-section">
      <ElFormItem label="SQL模板" prop="config.sql_template" :rules="[{ required: true, message: '请输入SQL模板', trigger: 'blur' }]">
        <ElInput 
          v-model="localConfig.sql_template" 
          type="textarea" 
          :rows="4"
          placeholder="例如: table_alias.user_id = {user.id} AND table_alias.status = 1" 
          @input="updateConfig"
        />
        <div class="field-hint">
          使用 {user.字段名} 来引用用户信息，table_alias 会被自动替换为实际的表别名
        </div>
      </ElFormItem>
      
      <ElAlert 
        title="安全提示" 
        type="warning" 
        :closable="false"
        description="自定义SQL具有较高的灵活性，但请确保SQL语句的安全性，避免SQL注入风险"
      />
    </div>

    <!-- 未知类型 -->
    <div v-else class="form-section">
      <ElAlert 
        title="未知的条件类型" 
        type="error" 
        :closable="false"
        :description="`不支持的条件类型: ${conditionType}`"
      />
    </div>

    <!-- 配置预览 -->
    <div class="config-preview">
      <ElDivider content-position="left">配置预览</ElDivider>
      <ElInput 
        :model-value="configPreview" 
        type="textarea" 
        :rows="3" 
        readonly 
        placeholder="配置信息将在此显示"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
interface Props {
  conditionType: string
  modelValue: Record<string, any>
}

interface Emits {
  (e: 'update:modelValue', value: Record<string, any>): void
}

const props = defineProps<Props>()
const emit = defineEmits<Emits>()

// 本地配置对象
const localConfig = ref<Record<string, any>>({})

// 配置预览
const configPreview = computed(() => {
  try {
    return JSON.stringify(localConfig.value, null, 2)
  } catch {
    return '{}'
  }
})

// 更新配置
const updateConfig = () => {
  // 清理空值
  const cleanConfig = Object.fromEntries(
    Object.entries(localConfig.value).filter(([_, value]) => value !== '' && value != null)
  )
  emit('update:modelValue', cleanConfig)
}

// 监听条件类型变化，重置配置
watch(() => props.conditionType, (newType) => {
  localConfig.value = {}
  updateConfig()
}, { immediate: true })

// 监听外部配置变化
watch(() => props.modelValue, (newValue) => {
  if (newValue && typeof newValue === 'object') {
    localConfig.value = { ...newValue }
  }
}, { immediate: true, deep: true })
</script>

<style lang="scss" scoped>
.dynamic-permission-form {
  .form-section {
    margin-bottom: 20px;
  }

  .field-hint {
    font-size: 12px;
    color: #909399;
    margin-top: 4px;
    line-height: 1.4;
  }

  .config-preview {
    margin-top: 20px;
    
    :deep(.el-input__inner) {
      font-family: 'Courier New', monospace;
      font-size: 12px;
    }
  }

  :deep(.el-alert) {
    margin-top: 8px;
  }

  :deep(.el-divider__text) {
    font-weight: 500;
  }
}
</style>